<template>
  <div class="container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <h3>兼容性分类评估</h3>
      </div>
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <template v-for="(item, index) in xEl">
          <el-menu-item
            :key="item.value + index"
            v-if="taskResult[item.value]"
            :index="index"
            >{{ item.label }}</el-menu-item
          >
        </template>
      </el-menu>
      <TableTwo
        :echartsId="xEl[activeIndex].value"
        :title="xEl[activeIndex].label"
        :tableList="taskResult[xEl[activeIndex].value]"
        :key="activeIndex"
        v-if="taskResult[xEl[activeIndex].value]"
        :keyWord="keyWord"
      />
    </el-card>
  </div>
</template>

<script>
import Echarts from "./echarts.vue";
import TableTwo from "./tableTwo.vue";

// const xEl =

export default {
  props: ["datas","keyWord"],
  components: { Echarts, TableTwo },
  name: "WholeDetails",
  data() {
    return {
      option: {
        title: {
          text: "兼容率",
          subtext: "100%",
          left: "center",
          top: "38%",
          textStyle: {
            fontSize: 14,
            algin: "center",
            color: "#777",
          },
          subtextStyle: {
            fontFamily: "微软雅黑",
            fontSize: "24px",
          },
        },
        tooltip: {
          trigger: "item",
          top: "center",
          left: "center",
        },
        legend: {
          orient: "vertical",
          top: "0%",
          left: "right",
        },
        series: [
          {
            name: "兼容性",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 0, name: "兼容", itemStyle: { color: "#91CC75" } },
              { value: 0, name: "不兼容", itemStyle: { color: "#FF7070" } },
            ],
          },
        ],
      },
      activeIndex: "0",
      data: null,
      taskResult: {},
      echartKey: null,
      keyWord: null,
      xEl: [
        { label: "表评估结果", value: "tableResult" },
        { label: "视图评估结果", value: "viewResult" },
        { label: "触发器评估结果", value: "triggerResult" },
        { label: "存储过程评估结果", value: "procedureResult" },
        { label: "索引评估结果", value: "indexResult" },
        { label: "序列评估结果", value: "seqResult" },
        { label: "同义词评估结果", value: "synonymResult" },
        { label: "函数评估结果", value: "functionResult" },
        { label: "类型评估结果", value: "typeResult" },
      ],
    };
  },
  mounted() {
    this.taskResult = JSON.parse(
      this.$props.datas.taskResult
    ).data.objectsResult;
    // this.keyWord = this.$props.keyWord;
  },
  methods: {
    handleSelect(key, keyPath) {
      this.activeIndex = key;
      //   console.log(key, keyPath);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  margin: 15px 0;
  h3 {
    margin: 5px 0;
    color: #5c5c5c;
    font-weight: 600;
    font-size: 16px;
  }

  p {
    margin: 0;
    padding: 0;
  }

  .desc {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .box-card {
      width: 25%;
      margin: 20px;
      height: 200px;

      p {
        font-size: 14px;
      }
    }
  }
  .compatibleBox {
    width: 100%;

    .compatiblePreview {
      display: flex;
      .compatiblePreviewRight {
        width: 40%;
        padding: 0 30px 0 40px;
        margin-left: 5%;

        .compatiblePreviewRightText {
          margin-top: 10px;
          p {
            font-weight: 600;
            font-size: 28px;
            color: rgba(0, 0, 0, 0.6);
          }

          span {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.6);
            margin: 7px 0;
            display: block;
          }
        }
      }
    }
  }
}
</style>
